<template>
  <div>
    <template>
      <el-button style="display: none" :plain="true">打开消息提示</el-button>
    </template>
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-descriptions
            class="margin-top"
            title="个人信息"
            :column="4"
            border
          >
            <template slot="extra">
              <el-button type="primary" size="small">编辑</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                学号
              </template>
              <el-tag type="">{{ userData.id }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                用户名
              </template>
              {{ userData.username }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{ userData.phone }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-male"></i>
                性别
              </template>
              {{ userData.sex }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                联系地址
              </template>
              {{ userData.address }}
            </el-descriptions-item>
            <el-descriptions-item v-if="this.$store.getters.user.type != 3">
              <template slot="label">
                <i class="el-icon-school"></i>
                班级
              </template>
              {{ userData.class_id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-s-custom"></i>
                身份
              </template>
              <el-tag type="success">{{
                userData.type == 1
                  ? '管理员'
                  : userData.type == 2
                  ? '学生'
                  : '老师'
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                注册时间
              </template>
              {{ userData.createtime | date }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-card
                style="
                  width: 80%;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                "
              >
                <div slot="header" class="clearfix" style="text-align: center">
                  <span>修改头像</span>
                </div>
                <el-upload
                  class="avatar-uploader"
                  :action="iconUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card
                style="
                  width: 80%;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                "
              >
                <div slot="header" class="clearfix" style="text-align: center">
                  <span>修改密码</span>
                </div>
                <div style="text-align: center">
                  <el-input
                    prefix-icon="el-icon-lock"
                    placeholder="请输入旧密码"
                    v-model="editPassForm.old_pwd"
                    show-password
                    style="margin-top: 10px"
                  ></el-input>
                  <el-input
                    prefix-icon="el-icon-lock"
                    placeholder="请输入新密码"
                    v-model="editPassForm.new_pwd1"
                    show-password
                    style="margin-top: 10px"
                  ></el-input>
                  <el-input
                    prefix-icon="el-icon-lock"
                    placeholder="请再输入密码"
                    v-model="editPassForm.new_pwd2"
                    show-password
                    style="margin-top: 10px"
                  ></el-input>
                  <el-button
                    type="primary"
                    style="margin-top: 10px"
                    @click="upPwd"
                    >提交修改</el-button
                  >
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
      editPassForm: {
        old_pwd: '',
        new_pwd1: '',
        new_pwd2: '',
      },
      userData: '',
      imageUrl: '',
      iconUrl: '',
      typePath: '',

    }
  },
  created () {
    const type = this.$store.getters.user.type
    this.typePath = type == 1 || type == 2 ? 'users' : 'teacher'
    this.getUserInfo()
  },


  filters: {
    date (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    type (i) {
      if (i == 1) {
        return "管理员"
      }
      if (i == 2) {
        return "学生"
      }
      if (i == 3) {
        return "教师"
      }
    }
  },
  methods: {

    async getUserInfo () {

      const { data } = await this.$Axios.get(`${this.typePath}/getUserInfo`)
      this.userData = data
    },

    open (message, type) {
      this.$message({
        message: message,
        type: type
      });
    },


    /**'
     * 修改密码调用(需要补充格式验证)
     */

    /**
     * 修改密码函数
     */
    async upPwd () {
      const { data: result } = await this.$Axios.post(`${this.typePath}/upPwd`, this.editPassForm)
      if (result.code) {
        this.$message.success('修改成功')
        this.editPassForm.old_pwd = ''
        this.editPassForm.new_pwd1 = ''
        this.editPassForm.new_pwd2 = ''
      } else {
        this.$message.error('修改失败')
      }
    },

    open2 (v) {
      this.$message({
        message: v,
        type: 'success'
      });
    },

    open3 (v) {
      this.$message({
        message: v,
        type: 'warning'
      });
    },

    open4 (v) {
      this.$message.error(v);
    },
    handleAvatarSuccess (res, file) {
      this.open("头像修改成功,待下次登陆更换显示", "success")
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  },
}
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
